<template>
  <div>
    <div>仅用作缓存测试</div>
    <div v-if="user.user?.userId">
      <div>用户名：{{ user.user?.name }}</div>
      <div>角色：{{ user.role }}</div>
      <el-button @click="reload">刷新页面</el-button>
      <el-button @click="logout">退出登录</el-button>
    </div>
    <el-button v-else @click="login">登录</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'

const user = useUserStore()

const login = () => {
  user.login({
    userId: '0',
    name: '测试',
    role: '测试角色'
  })
}

const logout = () => {
  user.logout()
}

const reload = () => {
  window.location.reload()
}
</script>

<style scoped lang="scss"></style>
